<template>
   <div class="iframe-cont">
       <div class="content">
           <el-page-header @back="$router.go(-1)" :content="$route.meta.title">
           </el-page-header>
<!--           分割线-->
           <el-divider></el-divider>
           <div class="group">
               <el-descriptions :labelStyle="{width:'100px'}" :colon="false" title="设备信息" :column="1" size="mini">
                   <el-descriptions-item label="设备出厂编号">{{info.macCode}}</el-descriptions-item>
                   <el-descriptions-item label="设备类型">{{info.deviceClassName}}</el-descriptions-item>
                   <el-descriptions-item label="销售日期">{{info.macTime}}</el-descriptions-item>
               </el-descriptions>
           </div>
           <el-divider></el-divider>
           <div class="group">
               <el-descriptions :labelStyle="{width:'100px'}" :colon="false"  title="维系信息" :column="1" size="mini">
                   <el-descriptions-item label="维系人员">{{info.repairName}}</el-descriptions-item>
                   <el-descriptions-item label="维修日期">{{info.repairTime}}</el-descriptions-item>
                   <el-descriptions-item label="维修内容">{{info.repairContent}}</el-descriptions-item>
                   <el-descriptions-item label="更换配件">
                       <div>
                           <div class="f f-a-c" v-for="item in info.partsInfo">
                               <div class="part">
                                   <div>{{item.partsName}}</div>
                                   <el-tag v-if="item.feeType===0">收费</el-tag>
                                   <el-tag v-else type="danger">三包</el-tag>
                               </div>
                               <span class="money">￥{{item.partsprice || 0}}</span>
                           </div>
                       </div>
                   </el-descriptions-item>
                   <el-descriptions-item label="其他费用（元）">{{info.otherPrice || 0}}</el-descriptions-item>
                   <el-descriptions-item label="尿素损耗（元）">{{info.ureaLoss || 0}}</el-descriptions-item>
                   <el-descriptions-item label="维修照片（元）">
                       <el-image
                           v-for="item in info.scenePhoto.split(',')"
                           style="width: 100px; height: 100px"
                           :src="item"
                           fit="fill"></el-image>
                   </el-descriptions-item>
                   <el-descriptions-item label="备注"></el-descriptions-item>
               </el-descriptions>
           </div>


       </div>
   </div>
</template>

<script>
    export default {
        name: "detail",
        data(){
            return{
                info:{},//接收数据
            }
        },

        created() {
          this.$http({
              url:"/api/machine/repair/detail",
              method: 'get',
              data:{
                  id:this.$route.query.id
              }
          }).then((res)=>{
              this.info = res.data;
              this.info.partsInfo = JSON.parse(this.info.partsInfo || '[]')
          })
        },
        methods:{

        }
    }
</script>

<style scoped lang="scss">
    .group{
        margin-top: 30px;
        padding-left: 40px;

    }
    .part {
        min-width: 200px;
        background: #eeeeee;
        padding: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 4px;
    }
    .money {
        font-weight: bold;
        color: #3487E8;
        margin-left: 10px;
        font-size: 14px;
    }
</style>
